<template>
  <div>
    <!-- Form -->
    <!-- el-dialog 是弹窗样式，title 绑定弹窗的标题内容，visible 绑定弹窗是否展示 -->
    <el-card class="box-card" title="新增">
      <div slot="header" class="clearfix">
        <span>{{form.id ? '编辑' : '新建'}}</span>
      </div>
      <!-- model 绑定表单对象，rules 绑定表单规则，ref 用来校验规则 -->
      <el-form :model="form" :rules="formRules" ref="form">
        <!-- el-form-item 绑定表单样式，label 表单的名称，formLabelWidth 设置 label 的宽度, 设置 prop 来进行规则校验 -->
        <el-form-item label="时间" :label-width="formLabelWidth" prop="date">
          <!-- 里面装载表单元素，这里装了个选择日期的组件，v-model 绑定选择值，value-format设置绑定值的格式，type 设置选择的范围，这里 date 表示到天 -->
          <!-- <el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker> -->

          <el-time-select v-model="form.cTime" :picker-options="{
            start: '07:00',
            step: '00:10',
            end: '22:00'}"
            placeholder="选择上课时间">
          </el-time-select>
          <el-time-select v-model="form.xTime" :picker-options="{
            start: '07:00',
            step: '00:10',
            end: '22:00'}"
            placeholder="选择下课时间">
          </el-time-select>

        </el-form-item>
        
        <el-form-item label="课程" :label-width="formLabelWidth" prop="courseName">
          <el-select v-model="form.courseName" placeholder="请选择">
            <el-option  
              v-for="item1 in options"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value"
            ></el-option>
          </el-select>
        </el-form-item>

         <el-form-item label="校区" :label-width="formLabelWidth" prop="crLocation">
          <el-select v-model="form.crLocation" placeholder="请选择">
            <el-option  
              v-for="item2 in options"
              :key="item2.value"
              :label="item2.label"
              :value="item2.value"
            ></el-option>
          </el-select>
          </el-form-item >

         <el-form-item label="楼牌号" :label-width="formLabelWidth" prop="crBuilding">
          <el-select v-model="form.crBuilding" placeholder="请选择">
            <el-option  
              v-for="item in options"
              :key="item3.value"
              :label="item3.label"
              :value="item3.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="教室号" :label-width="formLabelWidth" prop="crName">
          <el-select v-model="form.crName" placeholder="请选择">
            <el-option  
              v-for="item4 in options"
              :key="item4.value"
              :label="item4.label"
              :value="item4.value"
            ></el-option>
          </el-select>
        </el-form-item>
       
        <el-form-item label="班级" :label-width="formLabelWidth" prop="className">
          <el-select v-model="form.className" placeholder="请选择">
            <el-option  
              v-for="item5 in options"
              :key="item5.value"
              :label="item5.label"
              :value="item5.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

// 下面是 Vue 组件
export default {
  //import {getGlobalData, clearGlobalData} from 'utils/globalData';
  //string tName == {{username}};

  data() {
    return {
      formLabelWidth: '120px', // 表单 label 的宽度
      form: {}, // 用作表单绑定的内容
      formRules: {
        // date: [
        //   { type: 'string', required: true, message: '请选择日期', trigger: 'blur' }
        // ],

        // Ctime: [],
        // Xtime: [],
         crLocation: [
          { required: true, message: '请选择校区', trigger: 'blur' },
        ],
         crBuilding: [
          { required: true, message: '请选择楼牌号', trigger: 'blur' },
        ],
        courseName: [
          { required: true, message: '请选择课程', trigger: 'blur' },
        ],
        className: [
          { required: true, message: '请选择班级', trigger: 'blur' },
        ],
        crName: [
          { required: true, message: '请选择教室号', trigger: 'blur' }
        ]
      }
    };
  },
  watch: {
    '$route' () {
      // 对路由变化作出响应...
      this.updateFormItem();
    }
  },
  created: function () {
    this.updateFormItem();
  },
 
  methods: {
    // 获取路由信息，填充
    updateFormItem(){
      const id = this.$route.params.id;
      this.form={};
    },

    // 新增一个数据
    updateTableItem(item = {}){
      console.log("连接后端");
      this.axios({
        method: "post",
        url: "http://localhost:8080/sheZhi",
      }).then((res) => {
        
        console.log("获取数据成功");
      });
    },
    // 提交新增/修改表单
    submitForm(){
      // 校验表单
      // Element 表单校验规则配置，请查看https://element.eleme.cn/#/zh-CN/component/form
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 校验通过
          // 更新数据信息
          console.log("111111111111111111")
          this.updateTableItem(this.form);
         
          // 跳转回列表页
          this.$router.push({name: 'ProductList'});
        } else {
          // 校验失败
          return false;
        }
      });
    }
  }
};
</script>

<style>
</style>
